<template>
    <!-- 1.展示外部图标 -->
    <!-- :class动态绑定一个外部传递的类名 -->
    <div 
        v-if="isExternal" 
        :style="styleExternalIcon" 
        class="svg-external-icon svg-icon"
        :class="className"
        >
    </div>
    <!-- 2.展示内部图标 -->
    <svg v-else class="svg-icon" :class="className" aria-hidden="true">
        <use :xlink:herf="iconName"></use>
    </svg>
  
</template>

<script setup>
import { isExternal as external } from "../../utils/validate"
// 创建图标路径
import { defineProps, computed } from "vue"
/*
defineProps是Vue3中的一种新的组件数据传递方式，可以用于在子组件中定义接收哪些父组件的props。
当父组件的props发生变化时，子组件也会随之响应。
*/ 
const props = defineProps({
    // icon图标
    icon:{
        type:String,
        required:true
    },
    // 图标类名,方便处理样式
    className:{
        type:String,
        default:''
    }
})

/*
判断当前图标是否是外部图标
*/ 
const isExternal = computed(()=> external(props.icon))

/*
外部图标样式
*/ 
const styleExternalIcon = computed(()=>({
    mask:`url(${props.icon}) no-repeat 50% 50%`,
    '-webkit-mask' : `url(${props.icon}) no-repeat 50% 50%`
}))
/*
内部图标样式
*/
const iconName = computed(()=> `#icon-${props.icon}`)

</script>

<style lang="scss" scoped>

.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.svg-external-icon {
    background-color: currentColor;
    mask-size: cover;
    display: inline-block;
}

</style>